<script lang="ts" setup>
import { ref, watch } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  Button,
  Col,
  Form,
  FormItem,
  Input,
  InputNumber,
  Row,
  Select,
  SelectOption,
  Textarea,
} from 'ant-design-vue';

// Props
const props = defineProps<{
  capability?: any;
}>();

// Emits
const emit = defineEmits<{
  update: [data: any];
}>();

// 响应式数据
const formData = ref({
  implementationType: 'api',
  timeout: 60,
  retryCount: 1,
  retryInterval: 5,
  httpMethod: 'POST',
  apiUrl: '',
  serviceName: '',
  methodName: '',
  processDefinitionId: '',
  processInstanceId: '',
  ruleSetName: '',
  ruleName: '',
  scriptContent: '',
  parameters: [],
});

// 监听props变化
watch(
  () => props.capability,
  (newCapability) => {
    if (newCapability?.implementation) {
      formData.value = {
        ...formData.value,
        ...newCapability.implementation,
      };
    }
  },
  { immediate: true },
);

// 方法
const handleFormChange = () => {
  emit('update', { implementation: formData.value });
};

const addParameter = () => {
  formData.value.parameters.push({
    name: '',
    type: 'string',
    defaultValue: '',
  });
  handleFormChange();
};

const removeParameter = (index: number) => {
  formData.value.parameters.splice(index, 1);
  handleFormChange();
};
</script>

<template>
  <div class="capability-implementation">
    <Form layout="vertical" :model="formData">
      <Row :gutter="24">
        <Col :span="12">
          <FormItem label="实现类型" name="implementationType">
            <Select
              v-model:value="formData.implementationType"
              placeholder="请选择实现类型"
              @change="handleFormChange"
            >
              <SelectOption value="api">API接口</SelectOption>
              <SelectOption value="service">服务调用</SelectOption>
              <SelectOption value="workflow">工作流</SelectOption>
              <SelectOption value="rule">规则引擎</SelectOption>
              <SelectOption value="script">脚本执行</SelectOption>
            </Select>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="超时时间(秒)" name="timeout">
            <InputNumber
              v-model:value="formData.timeout"
              :min="1"
              :max="300"
              style="width: 100%"
              @change="handleFormChange"
            />
          </FormItem>
        </Col>
      </Row>

      <Row :gutter="24">
        <Col :span="12">
          <FormItem label="重试次数" name="retryCount">
            <InputNumber
              v-model:value="formData.retryCount"
              :min="0"
              :max="10"
              style="width: 100%"
              @change="handleFormChange"
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="重试间隔(秒)" name="retryInterval">
            <InputNumber
              v-model:value="formData.retryInterval"
              :min="1"
              :max="60"
              style="width: 100%"
              @change="handleFormChange"
            />
          </FormItem>
        </Col>
      </Row>

      <!-- API配置 -->
      <div v-if="formData.implementationType === 'api'" class="api-config">
        <h4>API配置</h4>
        <Row :gutter="24">
          <Col :span="12">
            <FormItem label="请求方法" name="httpMethod">
              <Select
                v-model:value="formData.httpMethod"
                placeholder="请选择请求方法"
                @change="handleFormChange"
              >
                <SelectOption value="GET">GET</SelectOption>
                <SelectOption value="POST">POST</SelectOption>
                <SelectOption value="PUT">PUT</SelectOption>
                <SelectOption value="DELETE">DELETE</SelectOption>
              </Select>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="请求URL" name="apiUrl">
              <Input
                v-model:value="formData.apiUrl"
                placeholder="请输入API地址"
                @change="handleFormChange"
              />
            </FormItem>
          </Col>
        </Row>
      </div>

      <!-- 服务配置 -->
      <div
        v-if="formData.implementationType === 'service'"
        class="service-config"
      >
        <h4>服务配置</h4>
        <Row :gutter="24">
          <Col :span="12">
            <FormItem label="服务名称" name="serviceName">
              <Input
                v-model:value="formData.serviceName"
                placeholder="请输入服务名称"
                @change="handleFormChange"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="方法名称" name="methodName">
              <Input
                v-model:value="formData.methodName"
                placeholder="请输入方法名称"
                @change="handleFormChange"
              />
            </FormItem>
          </Col>
        </Row>
      </div>

      <!-- 工作流配置 -->
      <div
        v-if="formData.implementationType === 'workflow'"
        class="workflow-config"
      >
        <h4>工作流配置</h4>
        <Row :gutter="24">
          <Col :span="12">
            <FormItem label="流程定义ID" name="processDefinitionId">
              <Input
                v-model:value="formData.processDefinitionId"
                placeholder="请输入流程定义ID"
                @change="handleFormChange"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="流程实例ID" name="processInstanceId">
              <Input
                v-model:value="formData.processInstanceId"
                placeholder="请输入流程实例ID"
                @change="handleFormChange"
              />
            </FormItem>
          </Col>
        </Row>
      </div>

      <!-- 规则配置 -->
      <div v-if="formData.implementationType === 'rule'" class="rule-config">
        <h4>规则配置</h4>
        <Row :gutter="24">
          <Col :span="12">
            <FormItem label="规则集名称" name="ruleSetName">
              <Input
                v-model:value="formData.ruleSetName"
                placeholder="请输入规则集名称"
                @change="handleFormChange"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="规则名称" name="ruleName">
              <Input
                v-model:value="formData.ruleName"
                placeholder="请输入规则名称"
                @change="handleFormChange"
              />
            </FormItem>
          </Col>
        </Row>
      </div>

      <!-- 脚本配置 -->
      <div
        v-if="formData.implementationType === 'script'"
        class="script-config"
      >
        <h4>脚本配置</h4>
        <FormItem label="脚本内容" name="scriptContent">
          <Textarea
            v-model:value="formData.scriptContent"
            placeholder="请输入脚本内容"
            :rows="6"
            @change="handleFormChange"
          />
        </FormItem>
      </div>

      <!-- 参数配置 -->
      <div class="parameters-config">
        <h4>参数配置</h4>
        <div class="parameters-list">
          <div
            v-for="(param, index) in formData.parameters"
            :key="index"
            class="parameter-item"
          >
            <Row :gutter="16">
              <Col :span="6">
                <Input
                  v-model:value="param.name"
                  placeholder="参数名"
                  @change="handleFormChange"
                />
              </Col>
              <Col :span="6">
                <Select
                  v-model:value="param.type"
                  placeholder="参数类型"
                  @change="handleFormChange"
                >
                  <SelectOption value="string">字符串</SelectOption>
                  <SelectOption value="number">数字</SelectOption>
                  <SelectOption value="boolean">布尔值</SelectOption>
                  <SelectOption value="object">对象</SelectOption>
                </Select>
              </Col>
              <Col :span="8">
                <Input
                  v-model:value="param.defaultValue"
                  placeholder="默认值"
                  @change="handleFormChange"
                />
              </Col>
              <Col :span="4">
                <Button type="text" danger @click="removeParameter(index)">
                  删除
                </Button>
              </Col>
            </Row>
          </div>
        </div>
        <Button
          type="dashed"
          @click="addParameter"
          style="width: 100%; margin-top: 16px"
        >
          <IconifyIcon icon="ant-design:plus-outlined" />
          添加参数
        </Button>
      </div>
    </Form>
  </div>
</template>

<style lang="less" scoped>
.capability-implementation {
  padding: 24px;

  h4 {
    margin: 24px 0 16px 0;
    color: #333;
    font-weight: 600;
  }

  .parameters-config {
    .parameters-list {
      .parameter-item {
        margin-bottom: 16px;
        padding: 16px;
        border: 1px solid #f0f0f0;
        border-radius: 6px;
        background: #fafafa;
      }
    }
  }
}
</style>
